<script setup lang="ts">
import { ref } from "vue";
import MyIcon from "@/components/MyIcon.vue";
import { userInfoStore } from "store/userInfo";
import { ElMessage } from "element-plus";
import PatchRequest from "util/requests/patchRequest";


const {isLogin,userInfo} = userInfoStore();
const user = userInfo.LoginUser
// console.log(userInfo);
const form =ref({
       id:user.id,
       // username:user.name,
       password:"",
       // email:user.email
})
const patchRequest = new PatchRequest()
const repassword = ref()
const submit =()=>{
  if (form.value.password !== repassword.value) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      // message: 'Passpassword are not consistent,<br/>Please reenter the password!',
      message:"前后密码不一致请重新输入",
      type:"warning"
    })
    form.value.password = ""
    repassword.value = ""
  }else {
      patchRequest.updateUserInfo(form.value).then(res=>{
        console.log(res);
      })
  }
}
const reset=()=>{
  form.value.password = ""
  repassword.value = ""
}
</script>

<template>
<div>
  <div class="container">
    <div class="conmon">
      <h3>重置密码</h3>
      <div class="slide"></div>
      <div class="form">
<!--        <label>UserName:</label>-->
<!--        <div class="input-box">-->
<!--          <my-icon  icon-name="videoicon_user_name"></my-icon>-->
<!--          <input v-model="form.username" type="text" placeholder="you name">-->
<!--        </div>-->
        <label>PassWord&nbsp:</label>
        <div class="input-box">
          <my-icon  icon-name="videodenglu-mima"></my-icon>
          <input v-model="form.password" type="password" placeholder="modify password">
        </div>
        <label>RePassWord&nbsp:</label>
        <div class="input-box">
          <my-icon  icon-name="videoquanxian"></my-icon>
          <input v-model="repassword" type="password" placeholder="password">
        </div>
        <div class="submit">
          <button @click="submit" class="button">Submit</button>
          <button @click="reset" class="button">Reset</button>
        </div>
      </div>
    </div>
  </div>

</div>
</template>

<style scoped>
.form{
    width: 50%;
}
input {
  width: 100%;
  height: 30px;
  border: none;
  border-bottom: 3px solid #ccc;
  background-color: transparent;
  color: #000;
  border-image: linear-gradient(to left, #ccc, #578aef) 1;
}

input:focus {
  outline: none;
  background-color: transparent;
  border-bottom: 3px solid cornflowerblue;
  border-image: linear-gradient(to right, #ccc, #578aef) 1;
}
input::placeholder {
  color: #000;
  opacity: .6;
  background-color: transparent;
}

label {
  width: 100%;
  background-color: transparent;
  font-weight: bold;
  font-size: 15px;
}

button {
  margin: 10px 30px;
  display: inline;
  color: black;
  width: 30%;
  text-align: center;
  line-height: 25px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  box-shadow: 2px 2px 4px #000;
}
button:hover {
  box-shadow: 2px 2px 2px #ccc;
}
.input-box{
  width: 100%;
  display: flex;
  margin: 10px 0;
}
.submit,.upload{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.slide{
  background-image: url("@/assets/img/b1.jpg");
  background-position: bottom;
  background-size: cover;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.4;
  border-radius: 10px;
}

a{
  color: wheat;
  font-weight: bold;
  margin: 10px;
}
.conmon{
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(250, 235, 215, 0.5);
  position: relative;
  perspective: 1000px;
  transition: 0.5s;
  box-shadow: 2px 1px 3px #000000;
}
.container{
  height: 400px;
}
</style>